<!DOCTYPE html>
<html>
<head>
    <base href="${springMacroRequestContext.contextPath}/"/>
    <meta charset="utf-8">
    <title>新增文案</title>
    <!-- 引入 css -->
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
    <script src="static/js/vue.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <script src="static/js/elementui-index.js"></script>
    <script src="static/js/axios.js"></script>
    <style>
        header {
            /* background-color: #333; */
            background: #1d213d;
            color: #fff;
            padding: 10px;
            text-align: center;
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
        }

        header img{
            height: 100%; /* 图片高度与header高度相同 */
            width: 400px;
            padding: 0 10px; /* 可以根据需要调整图片与标题之间的间距 */
        }
        header h1 {
            flex: 0.63; /* 让标题占据剩余的空间，实现标题居中 */
            text-align: center; /* 水平居中 */
            color: #fff; /* 设置标题颜色为白色 */
            margin: 0; /* 去掉默认的margin */
        }

        #title{
            display: block;
            font-size: 2.1em;
            margin-block-start: 0.67em;
            margin-block-end: 0.67em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }

        .textdiv{
            margin-top: 10px;
            width: 90%;
            margin-left: 5%;
        }
        #resourcetitle,#resourceurl{
            width: 50%;
            height: 35px;
        }
        #savebtn{
            width: 85%;
            border-radius: 3px;
            background-color: black;
            color: white;
            margin-left: 6%;
            height: 35px;
        }
        #savebtn:hover {
            background-color: #1C1C1C;  /* 鼠标悬停时修改按钮的背景颜色 */
        }
        .bodydiv{
            padding-top: 130px;
            height: 100%;
        }


        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }
        #toolbar-container { border-bottom: 1px solid #ccc; }
        #editor-container { height: 300px; }


    </style>
</head>
<body style="width: 100%;height: 100%;overflow: hidden;margin: 0px">
<div style="width: 100%;">
    <div style="position: fixed;width: 100%;">
        <header>
            <img src="static/images/logo.png" id="logo" style="float: left;" alt="梦寒君资源">
            <h1 id="title">新增文案</h1>
        </header>
    </div>
</div>
<div id="bodydiv" class="bodydiv">

    <div style="margin-left: 20px;margin-right: 20px">
        <el-form label-position="left" label-width="80px" :model="resource">
            <el-form-item label="资源标题">
                <el-input v-model="resource.title"></el-input>
            </el-form-item>


            <el-form-item label="资源等级">
                <el-select v-model="resource.level" placeholder="资源等级">
                    <el-option label="免费" value="0"></el-option>
                    <el-option label="会员" value="1"></el-option>
                    <el-option label="付费" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="资源类型">
                <el-select v-model="resource.type" placeholder="资源类型">
                    <el-option  label="文案哲理" value="文案哲理" ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="资源详情">
                <div id="editor—wrapper">
                    <div id="toolbar-container"><!-- 工具栏 --></div>
                    <div id="editor-container"><!-- 编辑器 --></div>
                </div>
            </el-form-item>
        </el-form>
    </div>

    <div style="margin-top: 10px;">
        <input type="button" value="保存" id="savebtn" @click="save">
    </div>



</div>
</body>
<script>

    var username = localStorage.getItem("username");
    var token = localStorage.getItem("token");
    var userid = localStorage.getItem("userid");
    var searchParams = new URLSearchParams(window.location.search);
    var resid = searchParams.get('resid');
    if(resid){
        resid = resid.toString();
    }
    if(resid!=null&&resid!=''){
        document.getElementById("title").innerText="编辑文案哲理";
    }

    new Vue({
        el: '#bodydiv',
        data: {
            typeList:[],
            initResourceId:'',
            resource: {
                resourceId:null,
                title: null,//标题
                description: null,//资源描述
                type: null,//类型
                level: '',//资源等级
                uploaderId: null//上传人
            },
            formLabelWidth: '120px'
        },
        methods: {
            /**
             * 打开编辑封面
             */
            initEditCover(){
                this.dialogFormVisible = true;
                this.coverFrom.text = this.resource.title;
            },
            /**
             * 保存方法
             */
            save(){
                if(resid!=null&&resid!=''){//说明是编辑
                    this.editresource();
                }else{
                    this.addresource();
                }
            },
            /**
             * 编辑资源
             */
            editresource(){
                this.resource.description = editor.getHtml();
                this.resource.resourceId = resid;
                axios.post('resources/admin/updateResource',this.resource, {headers: {"Content-Type": "application/json",
                        "Authorization": token}}).then(resp => {
                    if (resp.data.code != 200) {
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: '操作成功！',
                            type: 'success'
                        });
                        setTimeout(function (){
                            location.reload();
                        }, 2000);
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            /**
             * 新增资源
             */
            addresource(){
                this.resource.description = editor.getHtml();
                this.resource.uploaderId = userid+"";//上传人
                this.resource.resourceId = this.initResourceId;//资源ID
                if(this.resource.description==null||this.resource.description==''){
                    this.$message({
                        message: '请填写内容！',
                        type: 'warning'
                    });
                    return;
                }
                if(this.resource.title==null||this.resource.title==''){
                    this.$message({
                        message: '请填写标题！',
                        type: 'warning'
                    });
                    return;
                }
                axios.post('resources/admin/addResources',this.resource, {headers: {"Content-Type": "application/json","Authorization": token}}).then(resp => {
                    if (resp.data.code != 200) {
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: '操作成功！',
                            type: 'success'
                        });
                        setTimeout(function (){
                            location.reload();
                        }, 2000);

                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            getResourcesId(){
                axios.get('resources/admin/getResourceId', {headers: {"Content-Type": "application/json","Authorization": token}}).then(resp => {
                    if (resp.data.code != 200) {
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    } else {
                        this.initResourceId = resp.data.data;
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            /**
             * 编辑时进行初始化的方法
             */
            init() {
                axios.get('resources/admin/getResourceById?resourceId='+resid, {headers: {"Content-Type": "application/json","Authorization": token}}).then(resp => {
                    if(resp.data.code!=200){
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }else{
                        var data = resp.data.data;
                        editor.setHtml(data.description)
                        this.resource.title = data.title;
                        this.resource.url = data.url;
                        this.resource.type = data.type;
                        this.resource.level = data.level;
                        this.resource.cover = data.cover;
                    }
                }).catch(err=>{
                    console.log(err);
                })
            }
        },
        created() {
            if(resid!=null&&resid!=''){//说明是编辑
                this.init();
            }else{
                this.getResourcesId();
            }
        }
    })





    // 检测用户是否使用移动设备
    function isMobileDevice() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

    var screenHeight = window.innerHeight;
    // 如果是移动设备，则调整 div 的 padding
    if (isMobileDevice()) {
        document.getElementById("title").style.display = "none";
    }



    var { createEditor, createToolbar } = window.wangEditor

    var editorConfig = {
        placeholder: '请输入文案...',
        onChange(editor) {
            var html = editor.getHtml()
        }
    }

    var editor = createEditor({
        selector: '#editor-container',
        html: '',
        config: editorConfig,
        mode: 'default', // or 'simple'
    })

    var toolbarConfig = {}

    var toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })


</script>
</html>